<template>
  <div>
    <el-aside width="200px" :style="wrapStyle" id="aside">
      <div class="yishu">
        <h4 class="h4">商品管理系统</h4>
        <p>简易版商品管理系统</p>
      </div>
      <!-- default-active当前激活菜单的 index -->
      <!-- 导航菜单 -->
        <el-menu
          id="el-menu"
          :default-active="$route.path"
          router
          background-color="#2d353c"
          text-color="#fff"
          active-text-color="#409EFF"
          style="border: none"
          class="el-menu-vertical-demo"
        >
          <el-menu-item index="/" id="shou">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="/list">
            <template slot="title">
              <i class="el-icon-s-goods" id="shang"></i>
              <span>商品</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/list"><i class="el-icon-circle-plus"></i>商品列表</el-menu-item>
              <el-menu-item index="/soc"><i class="el-icon-circle-plus"></i>商品查询</el-menu-item>
              <el-menu-item index="/si"><i class="el-icon-circle-plus"></i>404</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
    </el-aside>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //自适应高度
      wrapStyle: {
        height: "",
      },
    };
  },
  methods: {
    //自适应高度
    getHeight() {
      let height = document.documentElement.clientHeight;
      this.wrapStyle.height = `${height}px`;
    },
  },
  //钩子函数捕获自适应高度
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
};
</script>
<style>
.el-aside {
  background-color: #2d353c;
  text-align: left;
  color: #333;
}
.el-container is-vertical {
  height: 1000px;
}
#aside{
  position: fixed;
}
.h4{
  height: 3px;
  text-align: center;
  text-shadow: 5px 5px 5px black, 0px 0px 2px black;
  color: white;
  line-height: 150px;

}
.yishu{
  height: 150px;
}
.yishu p{
  font-size: 12px;
  color: #fff;
  text-align: center;
}
</style>